<template>

  <div class="app-container">
    <!-- 左侧 菜单列表-->
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
        <el-card class="box-card" style="height: 100%">
          <div class="head-container">

            <div v-if="crud.props.searchToggle">
              <el-input v-model="query.title" clearable size="small" placeholder="输入菜单名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
              <rrOperation />
            </div>
            <crud-opts :permission="permission">
              <!--<template slot="left">
                <el-button
                  class="filter-item"
                  size="mini"
                  type="primary"
                  icon="el-icon-plus"
                >
                  审核
                </el-button>
              </template>-->
            </crud-opts>
          </div>
          <el-table
            ref="table"
            v-loading="crud.loading"
            :data="crud.data"
            border
            style="width: 100% "
            height="70vh"
            row-key="id"
            stripe
            lazy
            :load="loadChildren"
            :tree-props="{children: 'children', hasChildren: 'hasChildren' }"
            tooltip-effect="dark"
            :highlight-current-row="true"
            @select="crud.selectChange"
            @select-all="crud.selectAllChange"
            @selection-change="crud.selectionChangeHandler"
            @current-change="handleCurrentChange"
          >
            <el-table-column type="selection" width="45" />
            <el-table-column type="index" width="45" />
            <el-table-column prop="title" label="菜单标题" min-width="150" :show-overflow-tooltip="true" />
            <el-table-column prop="path" label="访问路径" min-width="150" :show-overflow-tooltip="true" />
            <el-table-column prop="code" label="菜单(组件)编码" min-width="100" />
            <el-table-column prop="icon" label="图标" width="50" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
                  <i :class="scope.row.icon" />
                </span>
                <span v-else-if="scope.row.icon">
                  <svg-icon :icon-class="scope.row.icon" />
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              width="100"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="(!scope.row.isOutside || scope.row.isOutside === 0)?'info' :(scope.row.isOutside === 1 && scope.row.openType === 1) ? 'warning' : 'success'"
                  disable-transitions
                >{{ (!scope.row.isOutside || scope.row.isOutside === 0 )?'内部链接': (scope.row.isOutside === 1 && scope.row.openType === 1 ) ?
                  '外部外链' : (scope.row.isOutside === 1 && scope.row.openType === 2) ? '内嵌外链':'外链?' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              width="80"
              sortable="custom"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  class="switch"
                  :width="50"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="启用"
                  inactive-text="禁用"
                  :disabled="!permission.has('edit')"
                  @change="crud.changeStatusWithNum(scope.row, scope.row.status, {'title':'菜单','column':'title'})"
                />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120" header-align="center" align="center">
              <template slot-scope="scope">
                <udOperation
                  :data="scope.row"
                  :permission="permission"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- 右侧 菜单详情-->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
        <MenuButtonInfo ref="menuButtons" :permission="permission" :parent-id="parent.id" :parent-info="parent.title" />
      </el-col>
    </el-row>

    <!-- 表单 -->
    <SysMenuForm :sys-menus="sysMenus" :parent="parent" />
    <!-- 详情, 如果用不到，注释下面一行 -->
    <SysMenuInfo />
  </div>
</template>

<script>
import menuApis, { getMenus, menusTree } from '@/api/sys/menu'
// import crudApi, { page } from '@/api/sys/Menu'
import SysMenuForm from './form'
import SysMenuInfo from './info'
import CRUD, { presenter, header } from '@crud/crud'
import CrudOpts from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
// import udOperation from '@crud/UD.operation'
import udOperation from '@crud/RUD.operation'
import MenuButtonInfo from './menuButtonInfo'
export default {
  name: 'SysMenu',
  components: {
    CrudOpts,
    rrOperation, udOperation,
    SysMenuForm, SysMenuInfo,
    MenuButtonInfo
  },
  cruds() {
    return CRUD({ title: '菜单',
      initDataMethod: getMenus,
      crudMethod: { ...menuApis },
      descs: ['paixu'],
      // ascs: ['id'],
      query: { parentId: '0', menuType: 3 }
    })
  },
  mixins: [presenter(), header()],
  data() {
    return {
      permission: new Map(),
      parent: {
        id: '0',
        title: ''
      },
      selectedRow: {},
      loadedChildren: false, // 是否加载子项
      sysMenus: [] // form 页面里面的菜单树
    }
  },
  mounted() {
    this.permission = this.$store.state.menu.buttonPermission.get('SysMenu')
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.query.parentId = '0'
      this.query.menuType = 3
      if (this.$refs.menuButtons) {
        this.clearButtonData()
      }
      return true
    },
    [CRUD.HOOK.beforeToCU](crud, form) {
      menusTree().then(res => {
        this.sysMenus = res.data
      })
    },
    // 选中一个菜单
    handleCurrentChange(row) {
      // 设置，右侧菜单按钮中的数据
      // this.setMenuButtonInfoData(row)
      this.setFromParentInfo(row)
    },
    clearButtonData() { // 清楚选择的按钮数据
      this.parent.id = null
      this.parent.title = null
    },
    setFromParentInfo(row) { // 设置form 表单中上级信息
      this.parent.id = row.id
      this.parent.title = row.title
    },
    // 加载子节点
    loadChildren(row, treeNode, resolve) {
      this.query.menuType = 3
      this.query.parentId = row.id
      this.loadedChildren = true // 已经加载子项
      getMenus(this.query).then(res => {
        setTimeout(() => {
          resolve(res.data)
        }, 200)
      })
    }

  }
}
</script>

<style scoped>

</style>
